import Plot, { registerBusinessComponent, resolveOption } from '../index.js'
import dataSource from 'mars-pro/src/pro/mixins/dataSource'
import { vRequired } from 'mars-pro/lib/pro/rule'

const inputVRequired = vRequired('不能为空')
const inputNumerVRequired = vRequired('不能为空', 'string', 'change')
const selectVRequired = vRequired('不能为空')

registerBusinessComponent([
    Plot.gen('Input', '文本输入', '无', {
        name: 'plot-form-input',
        inject: ["elForm"],
        render(h) {
            const { data, slots } = resolveOption(this,
                {
                    props: {
                        label: '文本输入',
                        labelWidth: '100px'
                    }
                })
            return <pro-input {...data}>
                {
                    Object.keys(slots).map((item) => (
                        <template slot={item}>{slots[item]}</template>
                    ))
                }
            </pro-input>
        },

    }),
    Plot.gen('Input', '文本输入', '非空', {
        name: 'plot-form-input-required',
        inject: ["elForm"],
        render(h) {
            const { data, slots } = resolveOption(this,
                {
                    props: {
                        label: '文本输入',
                        labelWidth: '100px',
                        rules: [inputVRequired]
                    }
                })
            return <pro-input {...data}>
                {
                    Object.keys(slots).map((item) => (
                        <template slot={item}>{slots[item]}</template>
                    ))
                }
            </pro-input>
        },

    }),
    Plot.gen('Input', '文本输入', '非空+查看', {
        name: 'plot-form-input-required-btn',
        inject: ["elForm"],
        render(h) {
            const { data, slots } = resolveOption(this,
                {
                    props: {
                        label: '文本输入',
                        labelWidth: '100px',
                        rules: [inputVRequired]
                    },
                    'class': 'plot-input-append-button'
                })
            const buttonDatas = {
                props: {
                    text: '查看',
                    ...(this.$attrs)
                },
                attrs: {
                    ...(this.$attrs),
                },
                on: {
                    handler: () => { },
                    ...(this.$listeners)
                }
            }
            return <pro-input {...data}>
                {
                    Object.keys(slots).map((item) => (
                        <template slot={item}>{slots[item]}</template>
                    ))
                }
                {
                    !slots.append && (
                        <pro-action slot="append" {...buttonDatas} />
                    )
                }
            </pro-input>
        },

    }),
    Plot.gen('Input', '文本输入', '非空+搜索', {
        name: 'plot-form-input-required-btn-search',
        inject: ["elForm"],
        render(h) {
            const { data, slots } = resolveOption(this,
                {
                    props: {
                        label: '文本输入',
                        labelWidth: '100px',
                        rules: [inputVRequired]
                    },
                    'class': 'plot-input-append-button-search'
                })
            const buttonDatas = {
                props: {
                    type: 'text',
                    icon: 'el-icon-search',
                    ...(this.$attrs),

                },
                attrs: {
                    type: 'text',
                    ...(this.$attrs),
                },
                on: {
                    handler: () => { },
                    ...(this.$listeners)
                }
            }
            return <pro-input {...data}>
                {
                    Object.keys(slots).map((item) => (
                        <template slot={item}>{slots[item]}</template>
                    ))
                }
                {
                    !slots.fappend && (
                        <pro-action slot="fappend" {...buttonDatas} />
                    )
                }
            </pro-input>
        },

    }),
    Plot.gen('Input', '数字输入', '无', {
        name: 'plot-form-input-number',
        inject: ["elForm"],
        render(h) {
            const { data, slots } = resolveOption(this,
                {
                    props: {
                        label: '数字输入',
                        labelWidth: '100px',
                        uiType: 'number'
                    }
                })
            return <pro-input {...data}>
                {
                    Object.keys(slots).map((item) => (
                        <template slot={item}>{slots[item]}</template>
                    ))
                }
            </pro-input>
        },

    }),
    Plot.gen('Input', '数字输入', '非空', {
        name: 'plot-form-input-number-required',
        inject: ["elForm"],
        render(h) {
            const { data, slots } = resolveOption(this,
                {
                    props: {
                        label: '数字输入',
                        labelWidth: '100px',
                        uiType: 'number',
                        rules: [inputVRequired]
                    }
                })
            return <pro-input {...data}>
                {
                    Object.keys(slots).map((item) => (
                        <template slot={item}>{slots[item]}</template>
                    ))
                }
            </pro-input>
        },

    })
])
